<script setup lang='ts'>
import { onMounted } from 'vue';
// 定义接受props参数
// Vue 3.5+的版本的用法
// const {age=20}=defineProps<{
//     name: string 
//     age?: number
// }>()

// Vue 3.5以下的默认值的设置方式
const props = withDefaults(
  defineProps<{ name: string, age?: number }>(),
  {
    name: "默认值",
    age: 100
  }
)
const test = () => {
  // 这里面拿到的是最新的传递过来的数据    
  console.log(props.name, props.age)
}
onMounted(() => {
  test()
})
//实现子组件向父组件传值
const emits = defineEmits<{ 
  // key(事件名称): value(参数类型数组)
  "updatAge": [age: number]
  "updateAll": [age: number, name: string]
}>()
const toParentAge = () => {
  emits("updatAge", props.age + 1)
}

const toParentAll = () => {
  emits("updateAll", props.age + 1, "王五")
}

</script>

<template>
  <div>
    <h2>子组件显示父组件传递的数据</h2>
    <p>接受的姓名：{{ name }}</p>
    <p>接受的年龄：{{ age }}</p>
    <button @click="toParentAge">子传父-emits形式-改年龄</button>
    <button @click="toParentAll">子传父-emits形式-改全部</button>
  </div>
</template>

<style scoped></style>